<template>
  <view class="index">
    <view class="tags">
      <block v-for="value in data"
             :key="value.key">
        <view class="tag"
              @tap="showModle(value)">
          <image class="tag-img"
                 :src="value.icon"></image>
          <text class="tag-text">{{value.type}}</text>
        </view>
      </block>
    </view>
    <view v-if="showModel"
          class="modledialog">
      <view class="dialog animate__animated animate__slideInLeft">
        <view class="question">
          {{question}}
        </view>
        <view class="anser">
          <input v-model="inputAnswer"
                 style="padding: 10rpx; font-size: 30rpx;" />
          <view class="tips">Your answer</view>
          <view class="clear_icon"
                @tap="clearAnswer()">
            <image class="icon"
                   src="../../static/icon/clear.png"
                   mode="aspectFill">
            </image>
          </view>
        </view>
        <view class="btn">
          <view class="quxiao"
                @click="this.showModel=false">
            取消
          </view>
          <view class="queren"
                @click="checkAnswer()">
            确认
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          type: "潘潘",
          key: 1,
          icon: "../../static/people/panpan.png",
        },
        {
          type: "慧慧",
          key: 2,
          icon: "../../static/people/huihui.png",
        },
        {
          type: "敏敏",
          key: 3,
          icon: "../../static/people/minmin.png",
        },
        {
          type: "秋燕",
          key: 4,
          icon: "../../static/people/huangqiuyan.png",
        },
        {
          type: "秋秋",
          key: 5,
          icon: "../../static/people/quanqiuyan.png",
        },
        {
          type: "江荧",
          key: 6,
          icon: "../../static/people/jiangying.png",
        },
        {
          type: "静静",
          key: 7,
          icon: "../../static/people/jingjing.png",
        },
        {
          type: "小窝",
          key: 10,
          icon: "../../static/people/sushe.png",
        },
        {
          type: "美食",
          key: 8,
          icon: "../../static/people/food.png",
        },
        {
          type: "风景",
          key: 9,
          icon: "../../static/people/fengjing.png",
        },
      ],
      showModel: false,
      question: "",
      inputAnswer: "",
      nowType: "",
      intervalID: "",
    };
  },
  onShow: function () {},
  methods: {
    showModle(value) {
      console.log("得到的", value);
      clearInterval(this.intervalID);
      this.question = "";
      this.inputAnswer = "";
      this.nowType = value.type;
      if (value.type == "潘潘") {
        this.showModel = true;
        this.dazi("潘潘的生日是哪一天？(XXXX年M月D日)");
      } else if (value.type == "慧慧") {
        this.showModel = true;
        this.dazi("慧慧对面是谁？");
      } else if (value.type == "敏敏") {
        this.showModel = true;
        this.dazi("敏敏的的毕业设计关于什么？");
      } else if (value.type == "秋燕") {
        this.showModel = true;
        this.dazi("秋燕什么时候开始打王者？");
      } else if (value.type == "秋秋") {
        this.showModel = true;
        this.dazi("秋秋买过的轻食品牌？");
      } else if (value.type == "江荧") {
        this.showModel = true;
        this.dazi("江荧的床帘是什么样子的？");
      } else if (value.type == "静静") {
        this.showModel = true;
        this.dazi("静静的学号和谁是连续的？");
      } else if (value.type == "小窝") {
        this.showModel = true;
        this.dazi("对暗号。请写出暗号");
      } else {
        this.goList();
      }
    },
    dazi(nowQuestion) {
      let index = 0;
      console.dir(new String());
      let intervalID_ = this.intervalID;
      this.intervalID = setInterval(() => {
        index++;
        this.question = nowQuestion.slice(0, index);
        // console.log(index);
        if (index === nowQuestion.length) {
          clearInterval(intervalID_);
        }
      }, 150);
    },
    checkAnswer() {
      console.log(this.nowType, this.inputAnswer);
      if (this.nowType == "潘潘" && this.inputAnswer == "2001年3月11日") {
        this.goList();
      } else if (this.nowType == "慧慧" && this.inputAnswer == "邓敏") {
        this.goList();
      } else if (this.nowType == "敏敏" && this.inputAnswer.includes("英语")) {
        this.goList();
      } else if (this.nowType == "秋燕" && this.inputAnswer == "大四下学期") {
        this.goList();
      } else if (this.nowType == "秋秋" && this.inputAnswer == "薄荷健康") {
        this.goList();
      } else if (
        this.nowType == "江荧" &&
        this.inputAnswer.includes("黑色") &&
        this.inputAnswer.includes("方格")
      ) {
        this.goList();
      } else if (
        this.nowType == "静静" &&
        this.inputAnswer.includes("江荧") &&
        this.inputAnswer.includes("邓敏")
      ) {
        this.goList();
      } else if (this.nowType == "小窝" && this.inputAnswer == "玛卡巴卡来了") {
        this.goList();
      } else {
        uni.showToast({
          icon: "error",
          title: "答错了",
          duration: 1500,
        });
      }
    },
    goList() {
      this.showModel = false;
      uni.navigateTo({
        url: "../list/list?type=" + this.nowType,
      });
    },
    clearAnswer() {
      console.log("清除");
      this.inputAnswer = "";
    },
  },
};
</script>

<style>
.modledialog {
  color: rgb(38, 38, 38);
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dialog {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-radius: 20upx;
  background-color: white;
  height: 400upx;
  width: 650upx;
  overflow: hidden;
}
.question {
  margin-top: 20upx;
  height: 80upx;
  line-height: 80upx;
  background-color: rgb(255, 255, 255);
}
.anser {
  position: relative;
  height: 70upx;
  width: 70%;
  line-height: 70upx;
  background-color: white;
  border: 1upx solid rgb(255, 167, 182);
  border-radius: 35upx;
  display: flex;
  padding-left: 15upx;
  justify-content: left;
  align-items: center;
}
.tips {
  position: absolute;
  font-size: 28upx;
  left: 30upx;
  top: 0;
  background-color: white;
  padding: 0 8upx;
  animation: tapinput 1s linear;
  animation-fill-mode: forwards;
  color: rgb(171, 171, 171);
}

.clear_icon {
  width: 50upx;
  height: 50upx;
  position: absolute;
  right: 15upx;
  z-index: 10;
}
.icon {
  width: 50upx;
  height: 50upx;
}

.btn {
  width: 100%;
  height: 100upx;
  line-height: 100upx;
  display: flex;
  justify-content: space-between;
}
.quxiao,
.queren {
  width: 50%;
  display: flex;
  justify-content: center;
}
.quxiao {
  background-color: rgb(255, 227, 231);
}
.queren {
  background-color: pink;
}

@keyframes tapinput {
  from {
  }
  to {
    top: -38upx;
    left: 30upx;
    color: rgb(255, 167, 182);
  }
}
</style>
